<template>
      <div>
        <!-- echart表格 -->
        <div id="myChart2" :style="echartStyle"></div>
      </div>
</template>
 
<script>


    export default {
        props: {

            // 样式
            echartStyle: {
                type: Object,
                default(){
                    return {}
                }
            },
            // 标题文本
            titleText: {
                type: String,
                default: ''
            },
            // 提示框键名
            tooltipFormatter: {
                type: String,
                default: ''
            },
            // 扇形区域名称
            opinion: {
                type: Array,
                default(){
                    return []
                }
            },
            // 提示框标题
            seriesName: {
                type: Array,
                default(){
                    return []
                }
            },
            // 扇形区域数据
            opinionData: {
                type: Array,
                default(){
                    return []
                }
            },


        },
        data(){
            return {
                //
                charts: null,
            }
        },
        mounted(){
            this.$nextTick(function() {
                this.drawPie('myChart2')
            })
        },
        methods: {
            // 监听扇形图点击
            eConsole(param) {
                // 向父组件传值
                this.$emit("currentEchartData",param.name);
            },
            // 绘制饼状图
            drawPie(id){
                this.charts = this.EChart.init(document.getElementById(id));
                this.charts.on("click", this.eConsole);
                this.charts.setOption({
                    title: {
                        text: this.titleText, // 标题文本
                        left: 'center'
                    },
                    tooltip : {

                        // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
                        trigger: 'item',
                        showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                        hideDelay: 20,   // 隐藏延迟，单位ms
                        // backgroundColor: 'rgba(255,0,0,0.7)',  // 提示框背景颜色
                        textStyle: {
                            fontSize: '16px',
                        },
                // formatter设置提示框显示内容
                // {a}指series.name  {b}指series.data的name
                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                //         formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}",
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x:'left',
                        data: this.opinion // 扇形区域名称
                    },
                    //空心中的数字
                    graphic:{
                        type:'text',
                        left:'center',
                        top:'45%',
                        style:{
                            text:this.sumNum,
                            textAlign:'center',
                            fill:'#302e33',
                            fontSize:25
                        }
                    },
                    series : [
                        {
                            name:this.opinionData['name'],  // 提示框标题
                            type: 'pie',
                            radius : ['0%','70%'],
                            center: ['60%', '45%'],
                            selectedMode: 'single',
                            data:this.opinionData, // 扇形区域数据
                            itemStyle: {
                                emphasis: {
                                    // 阴影的大小
                                    shadowBlur: 100,
                                    // 阴影水平方向上的偏移
                                    shadowOffsetX: 0,
                                    // 阴影垂直方向上的偏移
                                    shadowOffsetY: 0,
                                    // 阴影颜色
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                labelLine: {
                                    normal: {
                                        show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                                    }
                                },
                                // label: {
                                //     normal: {
                                //         // position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                                //         // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                                //         // {a}指series.name  {b}指series.data的name
                                //         // {c}指series.data的value  {d}%指这一部分占总数的百分比
                                //         formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                                //
                                //     }
                                // },

                            }
                        }
                    ],
                    opinion: this.opinion,

                })
            },
            render() {
                this.$nextTick(function() {
                    this.drawPie('myChart2')
                })
            },

        }
    }
</script>
 

